<template>
	<div id="main">
		<div class="main-top">
			<img src="../assets/main/dingwei.png" />
			<p>北京理工大学国防科技园2号楼10层</p>
			<img src="../assets/main/tishi.png"/>
		</div>
		<div class="mian-search">
			<img src="../assets/main/sousuo.png" />
			<p>山姆会员商店优惠商品</p>
		</div>
		<div class="main-lunbo">
			<img src="../assets/main/lunbo.png" />
		</div>
		<div class="main-table">
			<div class="tables">
				<img src="../assets/main/store.png" />
				<p>超市便利</p>
			</div>
			<div class="tables">
				<img src="../assets/main/caichang.png" />
				<p>菜市场</p>
			</div>
			<div class="tables">
				<img src="../assets/main/shuiguo.png" />
				<p>水果店</p>
			</div>
			<div class="tables">
				<img src="../assets/main/flowers.png" />
				<p>鲜花绿植</p>
			</div>
			<div class="tables">
				<img src="../assets/main/doctors.png" />
				<p>医药健康</p>
			</div>
		</div>
		<div class="main-table">
			<div class="tables">
				<img src="../assets/main/jiaju.png" />
				<p>家居时尚</p>
			</div>
			<div class="tables">
				<img src="../assets/main/cake.png" />
				<p>烘焙蛋糕</p>
			</div>
			<div class="tables">
				<img src="../assets/main/qiandao.png" />
				<p>签到</p>
			</div>
			<div class="tables">
				<img src="../assets/main/dapai.png" />
				<p>大牌免运</p>
			</div>
			<div class="tables">
				<img src="../assets/main/hongbao.png" />
				<p>红包套餐</p>
			</div>
		</div>
		<div class="fenge">	
		</div>
		<div class="fujin">
			<p>附近店铺</p>
		</div>
		<div class="main-fujin">
			<div class="dianpu">
				<img src="../assets/main/pinpai1.png" />
				<div class="content">
					<p>沃尔玛</p>
					<div class="xiangqing">
						<p>月售1万+</p>
						<p>起送¥0</p>
						<p>基础运费¥5</p>
					</div>
					<div class="vip">
						<span>VIP尊享满89元减4元运费券（每月3张）</span>
					</div>
				</div>
			</div>
			<div class="dianpu">
				<img src="../assets/main/pinpai2.png" />
				<div class="content">
					<p>山姆会员商店</p>
					<div class="xiangqing">
						<p>月售2千+</p>
						<p>起送¥0</p>
						<p>基础运费¥5</p>
					</div>
					<div class="vip">
						<span>联合利华洗护满10减5</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
	#main{
		margin: 0;
		padding: 0;
		height: 100%;
		position: fixed;
		width: 100%;
		background:#ffffff;
	}
	.main-top{
		display: flex;
		justify-content: space-around;
		text-align: center;
		align-items: center;
		padding-bottom:24px ;
		padding-top: 16px;
	}
	.main-top img{
		width: 18.3px;
		height: 19.2px;
	}
	.main-top p{
		font-size: 16px;
		color: #333333;
	}
	.mian-search{
		height: 32px;
		margin-left: 18px;
		margin-right: 18px;
		background: #f5f5f5;
		border-radius: 16px;
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}
	.mian-search img{
		padding-left: 16px;
		width: 16px;
		height: 16px;
	}
	.mian-search p{
		font-size: 14px;
		color: #B7B7B7;
		line-height: 16px;
		padding-left: 12px;
	}
	.main-lunbo{
		padding-left: 18px;
		padding-right: 18px;
	}
	.main-lunbo img{
		width: 100%;
		height: 86px;
		border-radius: 8px;
		padding-bottom: 16px;
	}
	.main-table{
		display: flex;
		justify-content: space-between;
		padding-left: 22px;
		padding-right: 22px;
		padding-bottom: 16px;
	}
	.tables img{
		width: 40px;
		height: 40px;
		padding-bottom: 6px;
	}
	.tables p{
		font-size: 12px;
		color: #333333;
		text-align: center;
	}
	.fenge{
		background: #F1F1F1;
		height: 10px;
		margin-bottom: 16px;
	}
	.fujin{
		padding-left: 18px;
		padding-bottom: 14px;
	}
	.fujin p{
		font-size: 18px;
		color: #333333;
	}
	.dianpu{
		display: flex;
		padding-left: 18px;
		padding-bottom: 12px;
	}
	.dianpu img{
		width: 56px;
		height: 56px;
		padding-right: 16px;
	}
	.content{
		border-bottom:1px solid #f1f1f1 ;
	}
	.content p{
		font-size: 16px;
		color: #333333;
		padding-bottom: 8px;
	}
	.xiangqing{
		display: flex;
	}
	.xiangqing p{
		padding-right: 16px;
		font-size: 13px;
		color: #333333;
		padding-bottom: 8px;
	}
	.content .vip span{
		font-size: 13px;
		color: #E93B3B;
	}
	.vip{
		padding-bottom: 12px;
	}
</style>
